<template>
  <div>
    <h1>列表
    </h1>

    <h3>
      <span style="color: #42b983">欢迎您!{{this.userReq.userName}}</span>
    </h3>

    <el-button slot="reference" @click="deleteUser">退出登录</el-button>

    <el-button type="primary" @click="toBuy" >购买</el-button>

    <el-table :data="buy" style="width: 100%">
      <el-table-column label="编号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buyId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="买车金额  " width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buyPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="购买日期  " width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buyTime }}</span>
        </template>
      </el-table-column>


      <el-table-column label="期数" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.periods }}</span>
        </template>
      </el-table-column>

      <el-table-column label="最后付款时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.latest }}</span>
        </template>
      </el-table-column>

      <el-table-column label="已还" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.alreadyPay }}</span>
        </template>
      </el-table-column>

      <el-table-column label="未还" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.haveNotPay }}</span>
        </template>
      </el-table-column>

      <el-table-column label="每期利率" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.interestRate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="每期利息" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.interest }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">查看还款</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import axios from "axios";
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        buyReq:{},
        buy:[],
        userReq:{},
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      // 退出登录
      deleteUser(){
        if (confirm("确定退出吗?")){
          axios.post('/api/auth/deleteUser').then(response=>{
            if (response.data.code ==200){
              this.$message.error("您已经退出登录,请重新登录")
              this.$router.push('/login')
            }
          })
        }else {
          this.$message.warning("取消退出")
        }
      },
      // 购买
      toBuy(){
        this.$router.push('/buyCar')
      },

      // 访问列表信息
      selectList(){
        axios.post('/api/buy/list',this.buyReq).then(response=>{
          this.buy=response.data.list
        })
      },
      // 获取用户信息
      getUserInfo(){
        axios.post('/api/auth/userInfo').then(response=>{
          this.userReq=response.data.data
        })
      },

      // 查看页面
      handleEdit(buyReq){
        this.buyReq=this.$router.push({path:'/findBuyPage',query:{buyReq:buyReq}})
      },

    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.selectList();
      this.getUserInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
